<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading='loading'>
            <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="0px" class="form" label-position='left'>
                <div class="form-title">发布公告</div>
                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level"><font color="red">*</font>&nbsp;标题</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="" prop="title" :rules="rules.title">
                                    <el-popover
                                        placement="top-start"
                                        trigger="focus" 
                                        content="长度在30个字符以内。">
                                        <el-input v-model="dataForm.title" slot="reference" :maxlength="30" placeholder="请输入标题" style="width:100%;"></el-input>
                                    </el-popover>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level">附件</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="" prop="fileUrl">
                                    <file-upload 
                                    @remove="fileFileRemove" 
                                    :file-list.sync="fileOptions.fileList" 
                                    :file-list-show.sync="fileOptions.fileListShow" 
                                    :list-type="fileOptions.listType"
                                    :up-file-type="fileOptions.upFileType"
                                    :accept-list="fileOptions.accept"
                                    @onSuccess="fileSuccessFn"
                                    @getFileName="getFileName"
                                    >
                                        <el-button type="default">上传附件</el-button>
                                        <div slot="tip" class="tip">支持100M以内的word、excel、ppt、rar、zip文档类型</div>
                                    </file-upload>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <!-- <span class="note-css"></span> -->
                        <span class="title-level"><font color="red">*</font>&nbsp;正文</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="22">
                                <el-form-item label="" prop="content" :rules="rules.content">
                                    <Tinymce 
                                    :id="tinymceId"
                                    :height="260" 
                                    ref="dataForm.content" 
                                    v-model="dataForm.content"
                                    ></Tinymce>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item>
                                <div class="footer">
                                    <el-button @click="resetForm('dataForm')">取消</el-button>
                                    <el-button type="primary" @click="submitForm('dataForm')">确认</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import Tinymce from 'components/Tinymce';
    import fileUpload from 'components/Upload/fileUpload';
    import { addNotice } from 'api/bulletinBoard';

    export default {
        name: 'announce',
        components: { Levelbar, Tinymce, fileUpload },
        data() {
            return {
                loading: false,
                tinymceId: 'tinymceId',
                fileOptions: {
                    upFileType: 'file',
                    fileListShow: true,
                    fileList: []
                },
                dataForm: {
                    title: '',
                    fileName: '',
                    fileUrl: '',
                    content: ''
                },
                rules: {
                    title: [
                        { required: true, message: '标题内容不能为空', trigger: 'blur' },
                        { min: 1, max: 30, message: '长度在30个字符以内', trigger: 'blur' }
                    ],
                    content: [
                    ]
                }
            }
        },
        computed: {
            
        },
        methods: {

            // 移除文件
            fileFileRemove(file) {
                this.dataForm.fileUrl = ''; 
            },

            // 上传文件成功后获取文件路径
            fileSuccessFn(obj) { 
                this.dataForm.fileUrl = obj.imgUrl;
                this.$message.success('上传成功'); 
            },   

            // // 获取上传文件名
            getFileName(file) {
                this.dataForm.fileName = file.name;
            },         
            submitForm(dataForm) {

                this.$refs[dataForm].validate((valid) => {
                    if (valid) {
                        let title = this.dataForm.title; 
                        let fileUrl = this.dataForm.fileUrl; 
                        let fileName = this.dataForm.fileName; 
                        let content = this.dataForm.content; 

                        let tempHtml = window.tinymce.get('tinymceId').getContent({format: 'raw'});
                        
                        if (tempHtml.indexOf('img') === -1 && tempHtml.indexOf('video') === -1) {
                            if (!window.tinymce.get('tinymceId').getContent({format: 'text'}).trim()) {
                                this.$message('请输入正文');
                                return;
                            }
                        }
                        
                        this.$confirm('确认发布?', ' ', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: ' '
                        }).then(() => {
                            this.loading = true;
                            addNotice(title, fileUrl, fileName, content).then(response => {
                                this.loading = false;
                                if (response.data.status == 200) {
                                    this.$message.success(response.data.errorMsg);
                                    this.$refs[dataForm].resetFields();
                                    this.$router.push({ path: '/home' });
                                    this.$store.dispatch('UpdateCache');
                                } else {
                                    this.$message.error(response.data.errorMsg);
                                }
                            }).catch(() => {
                                this.loading = false;
                            });
                        }).catch(() => {
                            this.$message({type: 'info', message: '已取消'});          
                        });
                    } else {
                        return false;
                    }
                });
            },
            
            resetForm(dataForm) {
                this.$refs[dataForm].resetFields();
                this.$router.push({ path: '/home' });
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss"  scoped>
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        font-size: 12px;
        color: #333;
        $bgcolor: #fff;

        @mixin showTitle() {
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        }
        .form-box {
            padding: 0 50px 20px;
            @include showTitle();
            .form-title {
                padding-top:8px;
                text-align: center;
                font-size: 18px;
                color: #333;
                line-height: 72px;
                font-weight: bold;
                font-family: Microsoft YaHei;
                border-bottom: 1px solid #ddd;
            }
            .form {
                .form-item {
                    .form-item-title {
                        margin: 40px 0;
                        font-size: 14px;
                        color: #333;
                        line-height: 14px;
                        border-left: 4px solid #ff5e2c;
                        text-indent: 16px;
                        .note-css {
                            vertical-align: middle;
                            display: inline-block;
                            width: 4px;
                            height: 12px;
                            margin-right: 26px;
                            border-left: 3px solid #ff5e2c;
                        }
                    }
                    .form-content {
                        margin-left: 35px;
                        .tip {
                            font-size: 12px;
                            color: #aaa;
                        }
                    }
                    .footer {
                        text-align: center;
                        margin-top: 30px;
                    }
                    
                }
            }
        }
        
    }
</style>